{% if not isXhr %}
{% extends "base.html" %}
{% endif %}

{% block title %}
<title>{{ title }}</title>
{% endblock %}

{% block meta %}
<meta name="keywords" content="{{ tags }}" />
{% endblock %}

{% if not isXhr %}
{% block extra_scripts %}
<script src="/blog/static/js/ng.js"></script>

<script type="text/javascript">
  // bootstrap script
  window.articlePath = '{{ articlePath }}';
</script>
{% endblock %}
{% endif %}

{% block body %}
<div class="col-md-2">
  <iframe src="http://rcm.amazon.com/e/cm?t=david0a-20&o=1&p=11&l=ez&f=ifr&f=ifr" width="120" height="600" scrolling="no" marginwidth="0" marginheight="0" border="0" frameborder="0" style="border:none;"></iframe>
</div>
<div class="col-md-8">
  <nav id="breadcrumbs" class="row">
    <ul class="breadcrumb">
      {% for i in breadcrumbs %}
      {% if not loop.last %}
      <li><a href="{{i['href']}}">{{i['text']}}</a></li>
      {% else %}
      <li class="active">{{i['text']}}</li>
      {% endif %}
      {% endfor %}
    </ul>
  </nav>
  <article id="article" class="row markdown">
    {{ article|safe }}
  </article>
  <div class="row">
    <dl id="comments">
      {% for c in comments %}
      <dt><em>{{ c.screenname }}</em> on {{ c.created }}:</dt>
      <dd  class="well">{{ c.comment }}</dd>
      {% endfor %}
    </dl>
  </div>
  <div class="row" id="addcommentform">
    <h3>Please add your comments</h3>
    <form class="well form-horizontal" role="form" id="commentForm" name="commentForm" ng-controller="CommentCtrl" ng-submit="submit()">
      <div class="form-group">
        <label class="control-label col-md-2" for="screenname">Name*</label>
        <div class="col-md-6">
          <input type="text" class="form-control input-lg" name="screenname" ng-model="screenname" placeholder="screen name" required ng-minlength="2"/>
          <div class="error" ng-show="commentForm.screenname.$dirty && (commentForm.screenname.$error.required || commentForm.screenname.$error.minlength)">Required, 2 letters minimum!</div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="emailaddr">Email*</label>
        <div class="col-md-6">
          <input type="email" class="form-control input-lg" name="email" ng-model="email" placeholder="email...it will NOT appear publicly" required/>
          <div class="error" ng-show="commentForm.email.$dirty && commentForm.email.$invalid">Invalid email address!</div>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-2" for="comment">Comments*</label>
        <div class="col-md-8">
          <textarea class="form-control input-lg" name="comment" ng-model="comment" placeholder="please input your comments here..." required ng-minlength="5"></textarea>
          <div class="error" ng-show="commentForm.comment.$dirty && (commentForm.comment.$error.required || commentForm.comment.$error.minlength)">At least 5 letters!</div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-offset-2 col-md-5">
          <button type="submit" class="btn btn-primary submit" ng-disabled="commentForm.$invalid">Submit</button>
          <button type="reset" class="btn btn-danger clear">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% include "blog/right_side.html" %}
{% endblock %}
